//折线图
function lineEvt(timeData,data1,ele){
	var lineOption = {
				color : ["#b6cc83","#0edf4d"],
		    tooltip : {
		        trigger: 'item',
		        /*backgroundColor: 'rgba(22,189,7,0.3)',
		        borderWidth: 1,
		        borderColor: 'rgba(22,189,7,0.8)',
		        textStyle: {
		            color: '#16d804'
		        },*/
		    },
		    grid: {
		        top:'8%',
		        left: '3%',
		        right: '3%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
//		        boundaryGap : false,
		        type: 'category',
		        splitLine:{    //grid区域分隔线
		            show:true,
		            lineStyle: {
		                width:1,
		                type:"dashed",
		                color:"#48484a"
		            }
		        },
		        axisLabel: {  //坐标轴标签
		            show: true,
		            textStyle: {
		                color: '#0d7790'
		            },
		            rotate : 45,
		        },
		        axisTick: {
		            show: false   //刻度线
		        },
		        axisLine:{
		            show: true,   //坐标轴轴线
		            lineStyle: {
		                width:1,
		                color:"#fff"
		            }
		        },
		        data : timeData
		    },
		    yAxis : {
		    	name : '',
		        splitLine:{    //grid区域分隔线
		            show:true,
		            lineStyle: {
		                width:1,
		                type:"dashed",
		                color:"#1a1a1b"
		            }
		        },
		        axisTick: {
		            show: false   //刻度线
		        },
		        axisLine: {
		            show: true ,  //坐标轴轴线
		            lineStyle: {
		                width:1,
		                color:"#fff"
		            }
		        },
		        axisLabel: {  //坐标轴标签
		            show: true
		        },
		    },
		    series : [
		        {
		            name:'数量',
		            type:'bar',
		            symbol:'none',  //这句就是去掉点的
		            stack: '总量',
		            barWidth:'50%',
		            smooth: 'true',
		            itemStyle: { normal: {
//		                color:'#20fd07',
		            }},
		            lineStyle: { normal: {
		                color:'#20fd07',
		            }},
		            areaStyle: {
		                normal: {
//		                    color:'#20fd07',
		                    opacity: 0.08
		                }
		            },
		            data:data1
		        }
		    ]
		};
		var lineChart = echarts.init(document.getElementById(ele))
		lineChart.setOption(lineOption);
		window.addEventListener("resize", function () {
    lineChart.resize();
});
}

function lineEvt1(timeData,data1,ele){
	var lineOption = {
				color : ["#0ea4e3","#0edf4d"],
		    tooltip : {
		        trigger: 'item',
//		        backgroundColor: 'rgba(22,189,7,0.3)',
//		        borderWidth: 1,
//		        borderColor: 'rgba(22,189,7,0.8)',
//		        textStyle: {
//		            color: '#16d804'
//		        },
		    },
		    grid: {
		        top:'8%',
		        left: '3%',
		        right: '3%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
//		        boundaryGap : false,
		        type: 'category',
		        splitLine:{    //grid区域分隔线
		            show:true,
		            lineStyle: {
		                width:1,
		                type:"dashed",
		                color:"#48484a"
		            }
		        },
		        axisLabel: {  //坐标轴标签
		            show: true,
		            textStyle: {
		                color: '#0d7790'
		            },
		            rotate : 45,
		        },
		        axisTick: {
		            show: false   //刻度线
		        },
		        axisLine:{
		            show: true,   //坐标轴轴线
		            lineStyle: {
		                width:1,
		                color:"#fff"
		            }
		        },
		        data : timeData
		    },
		    yAxis : {
		        splitLine:{    //grid区域分隔线
		            show:true,
		            lineStyle: {
		                width:1,
		                type:"dashed",
		                color:"#1a1a1b"
		            }
		        },
		        axisTick: {
		            show: false   //刻度线
		        },
		        axisLine: {
		            show: true ,  //坐标轴轴线
		            lineStyle: {
		                width:1,
		                color:"#fff"
		            }
		        },
		        axisLabel: {  //坐标轴标签
		            show: true
		        },
		    },
		    series : [
		        {
		            name:'数量',
		            type:'bar',
		            symbol:'none',  //这句就是去掉点的
		            stack: '总量',
		            barWidth: '50%',
		            smooth: 'true',
		            itemStyle: { normal: {
//		                color:'#20fd07',
		            }},
		            lineStyle: { normal: {
		                color:'#20fd07',
		            }},
		            areaStyle: {
		                normal: {
//		                    color:'#20fd07',
		                    opacity: 0.08
		                }
		            },
		            data:data1
		        }
		    ]
		};
		var lineChart = echarts.init(document.getElementById(ele))
		lineChart.setOption(lineOption);
		window.addEventListener("resize", function () {
		    lineChart.resize();
		});
}
var timeData1= ['广东移动','重庆联通','福建联通','山东移动','山东联通','湖南联通','深圳联通','天津联通','北京联通','四川电信']
var data1=[86492,44514,31523,25504,23811,13267,11637,9378,9111,7309]
lineEvt(timeData1,data1,"ec_line_nd")

var timeData2= ['广东','北京','山东','四川','天津','重庆','福建','江苏','湖北','上海']
var data2=[105568,56362,44845,37441,24550,14491,10131,9356,8932,8130]
lineEvt1(timeData2,data2,"ec_pie_nd")


//地图

	//var color = ['#a6c84c', '#ffa022', '#46bee9'];
	
//var provinces = {
//  '上海': './echarts/mapJson/data-1482909900836-H1BC_1WHg.json',
//  '河北': './echarts/mapJson/data-1482909799572-Hkgu_yWSg.json',
//  '山西': './echarts/mapJson/data-1482909909703-SyCA_JbSg.json',
//  '内蒙古': './echarts/mapJson/data-1482909841923-rkqqdyZSe.json',
//  '辽宁': './echarts/mapJson/data-1482909836074-rJV9O1-Hg.json',
//  '吉林': './echarts/mapJson/data-1482909832739-rJ-cdy-Hx.json',
//  '黑龙江': './echarts/mapJson/data-1482909803892-Hy4__J-Sx.json',
//  '江苏': './echarts/mapJson/data-1482909823260-HkDtOJZBx.json',
//  '浙江': './echarts/mapJson/data-1482909960637-rkZMYkZBx.json',
//  '安徽': './echarts/mapJson/data-1482909768458-HJlU_yWBe.json',
//  '福建': './echarts/mapJson/data-1478782908884-B1H6yezWe.json',
//  '江西': './echarts/mapJson/data-1482909827542-r12YOJWHe.json',
//  '山东': './echarts/mapJson/data-1482909892121-BJ3auk-Se.json',
//  '河南': './echarts/mapJson/data-1482909807135-SJPudkWre.json',
//  '湖北': './echarts/mapJson/data-1482909813213-Hy6u_kbrl.json',
//  '湖南': './echarts/mapJson/data-1482909818685-H17FOkZSl.json',
//  '广东': './echarts/mapJson/data-1482909784051-BJgwuy-Sl.json',
//  '广西': './echarts/mapJson/data-1482909787648-SyEPuJbSg.json',
//  '海南': './echarts/mapJson/data-1482909796480-H12P_J-Bg.json',
//  '四川': './echarts/mapJson/data-1482909931094-H17eKk-rg.json',
//  '贵州': './echarts/mapJson/data-1482909791334-Bkwvd1bBe.json',
//  '云南': './echarts/mapJson/data-1482909957601-HkA-FyWSx.json',
//  '西藏': './echarts/mapJson/data-1482927407942-SkOV6Qbrl.json',
//  '陕西': './echarts/mapJson/data-1482909918961-BJw1FyZHg.json',
//  '甘肃': './echarts/mapJson/data-1482909780863-r1aIdyWHl.json',
//  '青海': './echarts/mapJson/data-1482909853618-B1IiOyZSl.json',
//  '宁夏': './echarts/mapJson/data-1482909848690-HJWiuy-Bg.json',
//  '新疆': './echarts/mapJson/data-1482909952731-B1YZKkbBx.json',
//  '北京': './echarts/mapJson/data-1482818963027-Hko9SKJrg.json',
//  '天津': './echarts/mapJson/data-1482909944620-r1-WKyWHg.json',
//  '重庆': './echarts/mapJson/data-1482909775470-HJDIdk-Se.json',
//  '香港': './echarts/mapJson/data-1461584707906-r1hSmtsx.json',
//  '澳门': './echarts/mapJson/data-1482909771696-ByVIdJWBx.json'
//};	

var geoCoordMap={}
var mapFeatures = echarts.getMap('china').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
var mapData=[
	{name:'广东',value:105568},
	{name:'山东',value:56362},
	{name:'重庆',value:44845},
	{name:'福建',value:37441},
	{name:'北京',value:24550},
	{name:'湖南',value:14491},
	{name:'天津',value:10131},
	{name:'四川',value:9356},
	{name:'上海',value:8932},
	{name:'江苏',value:8130},
	{name:'湖北',value:7232},
	{name:'云南',value:5988},
	{name:'浙江',value:4424},
	{name:'广西',value:4298},
	{name:'陕西',value:2526},
	{name:'河北',value:2295},
	{name:'安徽',value:1725},
	{name:'甘肃',value:1516},
	{name:'河南',value:1359},
	{name:'海南',value:1068},
	{name:'江西',value:1043},
	{name:'辽宁',value:939},
	{name:'新疆',value:630},
	{name:'黑龙江',value:615},
	{name:'山西',value:503},
	{name:'贵州',value:353},
	{name:'吉林',value:314},
	{name:'宁夏',value:91},
	{name:'青海',value:33},
	{name:'内蒙古',value:17},
	{name:'西藏',value:5},
	{name: '台湾',value: 0 },
	{name: '香港',value: 0 },
	{name: '澳门',value: 0 }
]

	
var optionMap = {
	tooltip: {
		trigger: 'item',
		formatter:function(param){
//			console.log(param)
			return '<div>'+param.name+'</div>'+
			       '<div>网站数：'+param.data.value[2]+'</div>';
		}
	},
	geo: {
		show: true,
		zoom: 1.2,
		roam: false,
		map: 'china',
		itemStyle: {
			normal: {
				show: false,
				borderColor: '#285ac6',
				borderWidth: 1,
				areaColor: '#123082',
				shadowBlur: 3,
				shadowColor: '#081435',
				shadowOffsetX: -4,
				shadowOffsetY: 8
			},
			emphasis: {
				areaColor: '#fce24f',
				borderColor: '#fce24f'
			}
		}
	},
	series: [{
				type: 'map',
					zoom: 1.2,
					mapType: 'china',
					//		geoIndex: 0,
					roam: false,
					label: {
						normal: {
							show: false,
							textStyle: {
								color: '#fff'
							}
						},
						emphasis: {
							show: true,
							textStyle: {
								color: '#fff'
							}
						}
					},
					itemStyle: {
						normal: {
							show: false,
							borderColor: '#3770ea',
							borderWidth: 1,
							areaColor: '#0f2d87'
						},
						emphasis: {
							areaColor: '#2a56bd',
							borderColor: '#2a56bd',
							//				opacity: 0.8,
						}
					},
				data:convertData(mapData)
			},{
			 	name: 'Top 5',
	      type: 'effectScatter',
	      zlevel: 1,
	      coordinateSystem: 'geo',
	      symbolSize: function (val) {
	          return val[2]/105568*15+5
	      },
	      showEffectOn: 'render',
	      rippleEffect: {
	          brushType: 'stroke'
	      },
	      hoverAnimation: true,
	      label: {
	          normal: {
	//            formatter: '{b}',
			        position: 'right',
			        show: false
	          }
	      },
	      itemStyle: {
	          normal: {
	              color: '#f4e925',
	              shadowBlur: 10,
	              shadowColor: '#333'
	          }
	      },
	//    data: convertData(mapData)
				data:convertData(mapData.sort(function(a,b){
					return b.value-a.value
				}).slice(0,5))
			},{
			 	name: 'Top 5',
	      type: 'scatter',
	      zlevel: 1,
	      coordinateSystem: 'geo',
	      symbolSize: function (val) {
	//        return val*4+8;
					return val[2]/105568*15+5
	      },
	      showEffectOn: 'render',
	      rippleEffect: {
	          brushType: 'stroke'
	      },
	      hoverAnimation: true,
	      label: {
	          normal: {
	//            formatter: '{b}',
			        position: 'right',
			        show: false
	          }
	      },
	      itemStyle: {
	          normal: {
	              color: '#f4e925',
	              shadowBlur: 10,
	              shadowColor: '#333'
	          }
	      },
	//    data: convertData(mapData)
				data:convertData(mapData.sort(function (a, b) {
	          return b.value - a.value;
	      }).slice(5))
			}]
};

var mapChart = echarts.init(document.getElementById('ec_map_nd'))
mapChart.setOption(optionMap)

ranklistRight2Data();
function ranklistRight2Data(){
	var ranklistRight2 = $('#ranklistRight2');
	ranklistRight2.empty();
	var datas = [
		['meituan.com','京ICP备10211739号-1','北京三快科技有限公司','北京','1419.37','上升'],
		['jd.com','京ICP备11041704号-3','北京京东叁佰陆拾度电子商务有限公司','北京','1333.11','上升'],
		['suning.com','苏ICP备10207551号-4','苏宁易购集团股份有限公司','山东','1194.53','上升'],
		['dianping.com','沪B2-20040012-1','上海汉涛信息咨询有限公司','上海','589.25','上升'],
		['baixing.net','沪ICP备06019413号-1','百姓网股份有限公司','上海','377.03','下降'],
		['taobao.com','浙B2-20080224-1','浙江淘宝网络有限公司','浙江','370.92','上升'],
		['vip.com','粤ICP备08114786号-9','广州唯品会电子商务有限公司','广州','366.82','下降'],
		['58.com','京ICP备10012705号-2','北京五八信息技术有限公司','北京','153.33','上升'],
		['alipay.com','沪ICP备15027489号-2','支付宝（中国）网络技术有限公司','浙江','41.42','上升'],
		['tmall.com','浙B2-20110446-1','浙江天猫网络有限公司','上海','32.51','上升'],
	];
	var str = "<table class='tab_content'>";
	for(var i = 0 ; i < datas.length ; i++){
		var type = datas[i][5];
		var style = '';
		if(type == '上升'){
			style = 'up';
		}else{
			style = 'down';
		}
		str +="<tr>"+
		"<td title='"+datas[i][0]+"'>"+datas[i][0]+"</td>"+
    	"<td title='"+datas[i][1]+"'>"+datas[i][1]+"</td>"+
    	"<td title='"+datas[i][2]+"'>"+datas[i][2]+"</td>"+
    	"<td title='"+datas[i][3]+"'>"+datas[i][3]+"</td>"+
    	"<td style='width:80px;' title='"+datas[i][4]+"'>"+datas[i][4]+"</td>"+
    	"<td><div class="+style+"></div></td>"+
    	"</tr>"
	}
	str +="</table>";
	ranklistRight2.append(str);
}

//折线图
var timeData1= ['11-1','11-2','11-3','11-4','11-5','11-6','11-7','11-8','11-9','11-10','11-11','11-12','11-13','11-14','11-15']
var nameData=['天猫','淘宝']
var data1=[{
		name:'淘宝2016',
		data:[12444.00,14993.64,19480.80,13660.39,12104.27,12993.44,16197.61,29084.88,30080.11,22272.35,30622.38,20294.07,11189.92,12971.10,10749.57]
	},{
		name:'淘宝2017',
		data:[42444.00,45534.37,29675.27,33853.99,32113.65,43450.07,28228.97,35680.93,13803.87,21550.27,32637.93,47680.12,41799.66,87703.08,20773.01]
	},{
		name:'天猫2016',
		data:[5782.15,3737.76,1693.25,1954.35,7745.66,443.78,2505.37,6303.11,7568.61,2956.07,8220.41,5350.46,3513.57,4274.98,3191.10]
	},{
		name:'天猫2017',
		data:[2782.15,1744.60,694.40,955.50,1746.53,1046.39,947.23,1019.33,372.41,966.31,1227.69,1351.09,1523.56,2902.86,1202.96]
	},{
		name:'京东2016',
		data:[12651.72,17560.33,17655.77,18858.50,23184.78,21974.51,25974.21,26647.91,14616.82,22816.28,26987.48,23499.49,15103.38,11556.24,8808.63]
	},{
		name:'京东2017',
		data:[216651.72,27980.68,27870.31,50634.88,33270.33,319813.43,36429.79,284685.93,4636.21,72841.81,47409.52,114111.25,67449.79,117040.90,9094.42]
	},{
		name:'亚马逊2016',
		data:[424.05,126.27,507.11,24.28,151.44,39.07,41.61,250.05,76.70,37.17,48.45,133.17,534.05,247.08,53.04]
	},{
		name:'亚马逊2017',
		data:[824.05,126.28,207.13,124.28,51.44,39.08,41.62,150.06,76.71,37.17,48.48,3.22,627.39,163.49,15.07]
	},{
		name:'当当2016',
		data:[1077.91,9006.49,7210.33,13061.19,9482.18,9535.75,13964.68,4130.29,3953.85,12652.25,22509.33,9770.88,23297.90,11564.77,886.10]
	},{
		name:'当当2017',
		data:[8577.91,11010.91,5413.58,10661.55,10482.28,10537.69,15965.81,4131.12,3954.75,12652.59,20514.34,10794.39,16343.13,30646.84,347.36]
	},{
		name:'苏宁2016',
		data:[24179.51,11960.58,18475.42,16579.79,15925.31,16589.14,12272.25,14492.83,20316.56,27997.91,36535.63,18497.06,187238.17,95983.21,20441.05]
	},{
		name:'苏宁2017',
		data:[134179.51,92544.26,99539.17,66829.41,159656.71,166471.12,123347.67,145257.77,81326.05,68895.09,136771.81,99182.16,291771.62,626625.62,31340.69]
	},{
		name:'壹号店2016',
		data:[102.75,58.11,30.89,89.65,48.20,103.17,52.67,4.03,88.53,91.86,21.84,27.29,151.56,229.69,51.08]
	},{
		name:'壹号店2017',
		data:[94.75,31.13,8.98,39.76,28.27,80.24,36.49,5.99,24.19,52.42,4.90,59.48,850.77,287.40,44.54]
	},{
		name:'唯品会2016',
		data:[9952.22,7831.53,15178.69,5727.92,10993.60,11394.27,12420.42,17128.69,6422.65,3450.50,1423.85,22838.64,21427.35,32423.86,5228.03]
	},{
		name:'唯品会2017',
		data:[71952.22,17337.19,17366.83,5944.77,13053.55,20463.43,25445.51,11142.84,4718.08,4232.57,11958.90,18844.51,13513.60,85075.92,7113.77]
	},{
		name:'聚美优品2016',
		data:[1247.80,873.55,748.84,961.98,1279.16,1299.97,1399.44,1401.87,930.21,5709.41,3170.46,1202.59,3311.15,1052.43,511.39]
	},{
		name:'聚美优品2017',
		data:[1047.80,936.02,900.04,1179.70,1295.31,1515.35,1902.93,908.15,654.11,1753.05,2235.65,813.14,2531.32,2200.58,213.40]
	}
	
]
var color = ["#856cff","#c700ce","#db1500","#e25e00","#f2fd58","#01c401", "#00989d", "#219eff"]
function lineDataLen(data){
	var newData=[]
	for(var i=0;i<data.length;i++){
			newData.push({
				name:data[i].name.slice(0,data[i].name.length-4),
				data:data[i].data
			})
	}
//	console.log(newData)
	return newData
}


function getLineOption(timeData,data){
//	console.log(lineDataLen(data),'111')
	var series=[];
	for(var i=0;i<data.length;i++){
		series.push({
//			color : color[i % color.length],
			name : lineDataLen(data)[i].name,
			type : 'line',
			symbol : 'circle',
			trigger : 'axis',
			stack : '总量',
			barWidth : '50%',
			smooth : 'true',
			data : data[i].data
		})
	}
	var lineOption = {
			color:color,
			legend: {
		    	show:true,
		    	top:0,
		    	textStyle:{
		    		color:'#fff'
		    	},
		      data:lineDataLen(data1)
//		    	formatter: function (name) {
//		    		console.log(name+"name=="+name.length)
//		    		//var name = name.substring(0,name.length-4);
//		    	    return  name;
//		    	}
			},
		    tooltip : {
		        trigger: 'axis',
		        formatter :function(parmas){
//		        	console.log(parmas,'111')
		        	/*for(var i=0;i<parmas.length;i++){
		        		parmas[i].seriesName=data1[i].name
		        	}*/
		        	var html=''
		        	var yearName=''
		        	for(var i=0;i<parmas.length;i++){
		        		yearName=parmas[i].seriesIndex%2===0?2016:2017
		        		html+='<div>'+parmas[i].marker+yearName+parmas[i].seriesName+': '+parmas[i].data+'</div>'
		        	}
							return html
		        }
		        /*backgroundColor: 'rgba(22,189,7,0.3)',
		        borderWidth: 1,
		        borderColor: 'rgba(22,189,7,0.8)',
		        textStyle: {
		            color: '#16d804'
		        },*/
		    },
		    grid: {
		        top:70,
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        boundaryGap : false,
		        type: 'category',
		        splitLine:{    //grid区域分隔线
		            show:true,
		            lineStyle: {
		                width:1,
		                type:"dashed",
		                color:"#48484a"
		            }
		        },
		        axisLabel: {  //坐标轴标签
		            show: true,
		            textStyle: {
		                color: '#0d7790'
		            },
		            //rotate : 45,
		        },
		        axisTick: {
		            show: false   //刻度线
		        },
		        axisLine:{
		            show: true,   //坐标轴轴线
		            lineStyle: {
		                width:1,
		                color:"#fff"
		            }
		        },
		        data : timeData
		    },
		    yAxis : {
		    	name : '单位/万',
		        splitLine:{    //grid区域分隔线
		            show:true,
		            lineStyle: {
		                width:1,
		                type:"dashed",
		                color:"#1a1a1b"
		            }
		        },
		        axisTick: {
		            show: false   //刻度线
		        },
		        axisLine: {
		            show: true ,  //坐标轴轴线
		            lineStyle: {
		                width:1,
		                color:"#fff"
		            }
		        },
		        axisLabel: {  //坐标轴标签
		            show: true
		        },
		    },
		    series :series
		};
	return lineOption
}
var lineChart = echarts.init(document.getElementById("ec_line_nd2"))
lineChart.setOption(getLineOption(timeData1,data1))

window.addEventListener("resize", function () {
    lineChart.resize();
//  pieChart.resize();
    mapChart.resize();
//  barChart.resize();
});
